<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信任博弈 - 单人模式</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animations/animations.css">
</head>
<body>
<div class="container">
    <h1>信任博弈</h1>
    <div class="nav-links">
        <a href="history.html" class="nav-link">
            <span>📊 查看历史记录</span>
        </a>
        <a href="rooms.html" class="nav-link">
            <span>🏠 加入/创建房间</span>
        </a>
        <a href="friends.html" class="nav-link">
            <span>👥 好友对战</span>
        </a>
        <a href="#" class="nav-link" id="openHowToPlay">
            <span>❓ 玩法介绍</span>
        </a>
    </div>
    <div class="game-info">
        <!-- 资源池选择 -->
        <div class="pool-selector">
            <label for="poolSelector">选择资源池：</label>
            <select id="poolSelector" onchange="resetGame()">
                <option value="基础资源池">基础资源池 (仅金币)</option>
                <option value="标准资源池">标准资源池 (金币+信任值)</option>
                <option value="高级资源池">高级资源池 (金币+信任值+风险点)</option>
            </select>
        </div>
        
        <!-- 资源状态栏 -->
        <div class="resources-bar">
            <!-- 玩家资源 -->
            <div class="resources-section">
                <h3>你的资源</h3>
                <div id="playerResourcesContainer" class="resources-container">
                    <!-- 动态生成资源显示 -->
                </div>
                <!-- 兼容旧版UI (隐藏) -->
                <div class="player-stats" style="display:none;">
                    <div class="stat">
                        <span class="label">你的金币：</span>
                        <span id="playerCoins" class="value">10</span>
                    </div>
                </div>
            </div>
            
            <!-- AI资源 -->
            <div class="resources-section">
                <h3>AI的资源</h3>
                <div id="aiResourcesContainer" class="resources-container">
                    <!-- 动态生成资源显示 -->
                </div>
                <!-- 兼容旧版UI (隐藏) -->
                <div class="player-stats" style="display:none;">
                    <div class="stat">
                        <span class="label">AI的金币：</span>
                        <span id="aiCoins" class="value">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 玩家A的投资阶段 -->
    <div id="investmentPhase" class="phase active">
        <h2>你的回合（投资阶段）</h2>
        
        <div class="investment-grid">
            <div class="sliders-column">
                <!-- 金币投资 -->
                <div class="input-group resource-slider">
                    <div class="resource-label">
                        <span class="resource-icon" style="color: #FFD700">🪙</span>
                        <label for="investmentSlider">金币投资：</label>
                    </div>
                    <div class="slider-row">
                        <input type="range" id="investmentSlider" min="0" max="10" value="5">
                        <span id="investmentValue" class="slider-value">5</span>
                    </div>
                </div>
                
                <!-- 信任值投资 (仅在有信任值时显示) -->
                <div id="trustInvestmentGroup" class="input-group resource-slider" style="display: none;">
                    <div class="resource-label">
                        <span class="resource-icon" style="color: #4CAF50">🤝</span>
                        <label for="trustInvestmentSlider">信任值投资：</label>
                    </div>
                    <div class="slider-row">
                        <input type="range" id="trustInvestmentSlider" min="0" max="0" value="0">
                        <span id="trustInvestmentValue" class="slider-value">0</span>
                    </div>
                </div>
                
                <!-- 风险点投资 (仅在有风险点时显示) -->
                <div id="riskInvestmentGroup" class="input-group resource-slider" style="display: none;">
                    <div class="resource-label">
                        <span class="resource-icon" style="color: #FF5722">⚠️</span>
                        <label for="riskInvestmentSlider">风险点投资：</label>
                    </div>
                    <div class="slider-row">
                        <input type="range" id="riskInvestmentSlider" min="0" max="0" value="0">
                        <span id="riskInvestmentValue" class="slider-value">0</span>
                    </div>
                </div>
            </div>
            
            <!-- 投资预览 -->
            <div class="preview-column">
                <div class="investment-preview">
                    <h4>投资预览</h4>
                    <div class="preview-info">
                        <p>基础增值倍率: <strong>3.0x</strong></p>
                        <p id="trustBonusPreview" style="display: none;">信任值加成: <strong>+0.0x</strong></p>
                        <p id="riskPreview" style="display: none;">风险点效果: <strong>未知</strong> <small>(投资时随机)</small></p>
                    </div>
                </div>
            </div>
        </div>
        
        <button id="confirmInvestment">确认投资</button>
    </div>

    <!-- AI的返还阶段 -->
    <div id="returnPhase" class="phase">
        <h2>AI的回合（返还阶段）</h2>
        <div class="result-grid">
            <!-- 投资信息 -->
            <div class="return-section">
                <h3>投资详情</h3>
                <div id="investmentDetails" class="resources-display">
                    <!-- 默认显示金币投资 -->
                    <div class="resource-item">
                        <span class="resource-icon" style="color: #FFD700">🪙</span>
                        <span id="investedAmount">0</span>
                        <span class="resource-name">金币</span>
                    </div>
                    <!-- 其他资源由JS动态添加 -->
                </div>
            </div>
            
            <!-- 增值信息 -->
            <div class="return-section">
                <h3>增值详情 <span id="multiplierDisplay" class="multiplier-badge">3.0x</span></h3>
                <div id="multipliedDetails" class="resources-display">
                    <!-- 默认显示金币增值 -->
                    <div class="resource-item">
                        <span class="resource-icon" style="color: #FFD700">🪙</span>
                        <span id="multipliedAmount">0</span>
                        <span class="resource-name">金币</span>
                    </div>
                    <!-- 其他资源由JS动态添加 -->
                </div>
                <div class="multiplier-details">
                    <p>基础倍率: <span id="baseMultiplierDisplay">3.0x</span></p>
                    <p id="trustBonusDisplay" style="display: none;">信任值加成: <span>+0.0x</span></p>
                    <p id="riskModifierDisplay" style="display: none;">风险点效果: <span>+0.0x</span></p>
                </div>
            </div>
            
            <!-- 返还信息 -->
            <div class="return-section">
                <h3>AI返还 <span id="returnRateDisplay" class="return-rate-badge">50%</span></h3>
                <div id="returnDetails" class="resources-display">
                    <!-- 默认显示金币返还 -->
                    <div class="resource-item">
                        <span class="resource-icon" style="color: #FFD700">🪙</span>
                        <span id="returnAmount">0</span>
                        <span class="resource-name">金币</span>
                    </div>
                    <!-- 其他资源由JS动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 单回合结果 -->
    <div id="resultPhase" class="phase">
        <div class="result-header">
            <h2>回合结果</h2>
            <div class="round-info">
                <span class="round-badge">回合：<span id="currentRound">1</span>/<span id="totalRounds">5</span></span>
            </div>
        </div>
        
        <!-- 资源变化 -->
        <div class="resources-change">
            <div class="player-result">
                <h3>你的资源</h3>
                <div id="playerResultResources" class="resources-display">
                    <!-- 默认显示金币 -->
                    <div class="resource-item">
                        <span class="resource-icon" style="color: #FFD700">🪙</span>
                        <span id="playerFinal">0</span>
                        <span class="resource-name">金币</span>
                    </div>
                    <!-- 其他资源由JS动态添加 -->
                </div>
            </div>
            
            <div class="ai-result">
                <h3>AI的资源</h3>
                <div id="aiResultResources" class="resources-display">
                    <!-- 默认显示金币 -->
                    <div class="resource-item">
                        <span class="resource-icon" style="color: #FFD700">🪙</span>
                        <span id="aiFinal">0</span>
                        <span class="resource-name">金币</span>
                    </div>
                    <!-- 其他资源由JS动态添加 -->
                </div>
            </div>
        </div>
        
        <div class="next-round-container">
            <p class="next-round-info">下一回合即将开始...</p>
        </div>
    </div>

    <!-- AI策略选择 -->
    <div class="ai-strategy">
        <label>选择AI策略：</label>
        <select id="strategySelect">
            <option value="good">好人AI (返还50%)</option>
            <option value="bad">坏人AI (返还0%)</option>
            <option value="fair">公平AI (返还33%)</option>
            <option value="psychological">心理战AI (动态返还)</option>
            <option value="vengeful">报复性AI (根据信任度)</option>
        </select>
    </div>
</div>

<!-- 玩法介绍模态框 -->
<div id="howToPlayModal" class="modal">
    <div class="modal-content">
        <span class="close-modal">&times;</span>
        <h2>信任博弈玩法介绍</h2>
        
        <!-- 分步骤导航 -->
        <div class="tutorial-nav">
            <div class="tutorial-step active" data-step="1">
                <span class="step-number">1</span>
                <span class="step-title">游戏目标</span>
            </div>
            <div class="tutorial-step" data-step="2">
                <span class="step-number">2</span>
                <span class="step-title">资源类型</span>
            </div>
            <div class="tutorial-step" data-step="3">
                <span class="step-number">3</span>
                <span class="step-title">投资阶段</span>
            </div>
            <div class="tutorial-step" data-step="4">
                <span class="step-number">4</span>
                <span class="step-title">增值阶段</span>
            </div>
            <div class="tutorial-step" data-step="5">
                <span class="step-number">5</span>
                <span class="step-title">返还阶段</span>
            </div>
            <div class="tutorial-step" data-step="6">
                <span class="step-number">6</span>
                <span class="step-title">AI策略</span>
            </div>
        </div>
        
        <!-- 教程内容 -->
        <div class="tutorial-content-container">
            <!-- 步骤1：游戏目标 -->
            <div class="tutorial-content active" data-step="1">
                <h3>游戏目标</h3>
                <div class="tutorial-info">
                    <p>在「信任博弈」中，你的目标是通过合理投资和管理资源，在多轮博弈中最大化自己的收益。</p>
                    <p>游戏进行<strong>5轮</strong>博弈，每轮你需要决定投资多少资源给AI。AI会将这些资源增值后，决定返还给你多少。</p>
                    <p>关键在于<strong>如何平衡风险和回报</strong>，以及如何根据AI的策略调整自己的投资行为。</p>
                    <div class="tutorial-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f0f0'/%3E%3Ctext x='150' y='100' font-family='Arial' font-size='14' text-anchor='middle'%3E游戏目标示意图%3C/text%3E%3C/svg%3E" alt="游戏目标示意图">
                    </div>
                </div>
            </div>
            
            <!-- 步骤2：资源类型 -->
            <div class="tutorial-content" data-step="2">
                <h3>资源类型</h3>
                <div class="tutorial-info">
                    <p>游戏中有三种资源类型，每种都有不同的特性和价值：</p>
                    <div class="resource-explanation">
                        <div class="resource-icon" style="color: #FFD700">🪙</div>
                        <div class="resource-details">
                            <h4>金币</h4>
                            <p>基础货币单位，用于投资和交易，基础价值为<strong>1.0</strong>。</p>
                        </div>
                    </div>
                    <div class="resource-explanation">
                        <div class="resource-icon" style="color: #4CAF50">🤝</div>
                        <div class="resource-details">
                            <h4>信任值</h4>
                            <p>影响资源增值倍率，每点信任值增加<strong>5%</strong>的增值率，基础价值为<strong>2.0</strong>。</p>
                        </div>
                    </div>
                    <div class="resource-explanation">
                        <div class="resource-icon" style="color: #FF5722">⚠️</div>
                        <div class="resource-details">
                            <h4>风险点</h4>
                            <p>增加投资的风险和潜在回报，有<strong>50%</strong>几率增加<strong>20%</strong>增值率，<strong>50%</strong>几率减少<strong>10%</strong>增值率，基础价值为<strong>1.5</strong>。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 步骤3：投资阶段 -->
            <div class="tutorial-content" data-step="3">
                <h3>投资阶段</h3>
                <div class="tutorial-info">
                    <p>在投资阶段，你需要决定投入多少资源给AI：</p>
                    <ol>
                        <li>使用滑动条调整你要投资的<strong>金币</strong>数量</li>
                        <li>如果你选择了标准或高级资源池，还可以投资<strong>信任值</strong></li>
                        <li>在高级资源池中，你还可以投资<strong>风险点</strong></li>
                    </ol>
                    <p>投资预览区域会显示你的投资可能带来的增值效果。</p>
                    <p><strong>注意</strong>：投资的资源会立即从你的资源池中扣除，并给到AI进行增值。</p>
                    <div class="tutorial-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f0f0'/%3E%3Ctext x='150' y='100' font-family='Arial' font-size='14' text-anchor='middle'%3E投资阶段示意图%3C/text%3E%3C/svg%3E" alt="投资阶段示意图">
                    </div>
                </div>
            </div>
            
            <!-- 步骤4：增值阶段 -->
            <div class="tutorial-content" data-step="4">
                <h3>增值阶段</h3>
                <div class="tutorial-info">
                    <p>当你确认投资后，AI会对你的资源进行增值：</p>
                    <ol>
                        <li><strong>基础增值</strong>：所有投资资源翻<strong>三倍</strong>（3.0x）</li>
                        <li><strong>信任值加成</strong>：每点信任值增加<strong>5%</strong>增值率</li>
                        <li><strong>风险点效果</strong>：每点风险点有<strong>50%</strong>几率增加<strong>20%</strong>增值率，<strong>50%</strong>几率减少<strong>10%</strong>增值率</li>
                    </ol>
                    <p>例如：投资2金币+1信任值的增值计算：</p>
                    <p>2金币 × (3.0基础倍率 + 0.05信任值加成) = 6.1金币</p>
                    <div class="tutorial-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f0f0'/%3E%3Ctext x='150' y='100' font-family='Arial' font-size='14' text-anchor='middle'%3E增值阶段示意图%3C/text%3E%3C/svg%3E" alt="增值阶段示意图">
                    </div>
                </div>
            </div>
            
            <!-- 步骤5：返还阶段 -->
            <div class="tutorial-content" data-step="5">
                <h3>返还阶段</h3>
                <div class="tutorial-info">
                    <p>在增值完成后，AI会决定从增值后的资源中返还给你多少：</p>
                    <ol>
                        <li>AI根据其策略，决定返还比例</li>
                        <li>系统计算具体返还的各类资源数量</li>
                        <li>资源返还到你的账户，未返还部分归AI所有</li>
                    </ol>
                    <p>当数字变红时，表示你在这轮博弈中的净亏损；当数字变绿时，表示你的净收益为正。</p>
                    <p><strong>注意</strong>：AI的返还策略会影响游戏结果，请根据AI的行为模式调整你的投资策略。</p>
                    <div class="tutorial-image">
                        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200'%3E%3Crect width='300' height='200' fill='%23f0f0f0'/%3E%3Ctext x='150' y='100' font-family='Arial' font-size='14' text-anchor='middle'%3E返还阶段示意图%3C/text%3E%3C/svg%3E" alt="返还阶段示意图">
                    </div>
                </div>
            </div>
            
            <!-- 步骤6：AI策略 -->
            <div class="tutorial-content" data-step="6">
                <h3>AI策略</h3>
                <div class="tutorial-info">
                    <p>游戏中有5种不同的AI策略，每种都有不同的返还行为：</p>
                    <div class="ai-strategy-explanation">
                        <h4>好人AI</h4>
                        <p>始终返还<strong>50%</strong>的增值额，稳定可靠。</p>
                    </div>
                    <div class="ai-strategy-explanation">
                        <h4>坏人AI</h4>
                        <p>始终返还<strong>0%</strong>，全部占为己有，对玩家极不友好。</p>
                    </div>
                    <div class="ai-strategy-explanation">
                        <h4>公平AI</h4>
                        <p>始终返还<strong>33%</strong>的增值额，处于中等水平。</p>
                    </div>
                    <div class="ai-strategy-explanation">
                        <h4>心理战AI</h4>
                        <p>根据玩家历史投资行为动态调整返还率，会偶尔欺骗，难以预测。</p>
                    </div>
                    <div class="ai-strategy-explanation">
                        <h4>报复性AI</h4>
                        <p>记住玩家行为，对低投资进行惩罚，对高投资给予奖励。</p>
                    </div>
                    <p><strong>提示</strong>：不同的AI策略适合不同的投资方式，尝试找出最适合每种AI的投资策略！</p>
                </div>
            </div>
        </div>
        
        <!-- 导航按钮 -->
        <div class="tutorial-navigation">
            <button id="prevStep" disabled>上一步</button>
            <button id="nextStep">下一步</button>
            <button id="startPlaying" style="display:none;">开始游戏</button>
        </div>
    </div>
</div>

<script type="module" src="js/main.js"></script>
</body>
</html>